import { ElPagination as Pagination } from 'element-plus'
import { computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'SPagination',
  props: {
    background: {
      type: [Boolean],
      required: false,
      default: false,
    },
    disabled: {
      type: [Boolean],
      required: false,
      default: false,
    },
    small: {
      type: [Boolean],
      required: false,
      default: false,
    },
    pagerCount: {
      type: [Number],
      required: false,
      default: 5,
    },
    currentPage: {
      type: [Number],
      required: false,
      default: 1,
    },
    pageSize: {
      type: [Number],
      required: false,
      default: 20,
    },
    total: {
      type: [Number],
      required: false,
      default: 0,
    },
    pageSizes: {
      type: [Array],
      required: false,
      default: [5, 10, 20, 30, 40],
    },
    layout: {
      type: [String],
      required: false,
      default: '->, total, sizes, prev, pager, next, jumper',
    },
  },
  setup(props, { attrs, slots, emit, expose }) {
    const pageCount = computed(() => {
      const { total, pageSize } = props
      return Math.ceil(total / pageSize)
    })

    const $props = computed(() => {
      return {
        ...props,
        ...attrs,
        pageCount: pageCount.value,
      }
    })

    return () => (
      <>
        <Pagination {...$props.value}></Pagination>
      </>
    )
  },
  install: function (Vue) {
    Vue.component(this.name, this)
  },
})
